<template>
    <!-- 主体区域 -->
    <section id="app">
        <TodoHeader @add="handleAdd"/>
        <TodoMain :list="list" @del="handleDel"/>
        <TodoFooter :list="list" @clear="handleClear"/>
    </section>
</template>

<script>
import TodoHeader from "@/components/TodoHeader.vue";
import TodoMain from "@/components/TodoMain.vue";
import TodoFooter from "@/components/TodoFooter.vue";

export default {
    components: {TodoFooter, TodoMain, TodoHeader},
    data() {
        return {
            list: JSON.parse(localStorage.getItem("list")) || [
                {id: 1, name: "唱跳Rap篮球"},
                {id: 2, name: "吃饭"},
                {id: 3, name: "睡觉"},
            ]
        }
    },
    methods: {
        handleAdd(todoName) {
            // console.log(todoName)
            this.list.unshift({
                id: +new Date(),
                name: todoName
            })
        },
        handleDel(id) {
            // console.log(id)
            this.list = this.list.filter(item => item.id !== id)
        },
        handleClear() {
            this.list = []
        }
    },
    watch: {
        list: {
            deep: true,
            handler(newValue) {
                localStorage.setItem("list", JSON.stringify(newValue))
            }
        }
    }
}
</script>

<style>

</style>
